<template>
    <div>
        <Row :gutter="10">
            <Col>
            <Card>
                <p class="admin_title" style="margin-top: 0;margin-bottom: 20px;">
                    编辑角色
                </p>
                <Row>
                    <Col span="18">
                        <Form :model="formValidate" ref="formValidate" :label-width="80">
                            <FormItem label="角色名称" prop="name">
                                <Input v-model="formValidate.name" placeholder="请输入角色名称" disabled></Input>
                            </FormItem>
                            <FormItem label="角色描述" prop="description">
                                <Input v-model="formValidate.description" type="textarea" :rows="4" placeholder="请输入角色描述"></Input>
                            </FormItem>
                            <FormItem label="选择权限" prop="description">
                                <div class="auth_select">
                                    <CheckboxGroup v-model="auth_selected" @on-change="selectAuth">
                                        <Checkbox v-for="(item,key) in auth_list" :key="key" :label="item.name" class="auth_check">
                                             <span>{{item.name}}({{item.description}})</span>
                                        </Checkbox>
                                    </CheckboxGroup>
                                </div>
                            </FormItem>
                            <FormItem>
                                <Button type="primary" @click="handleSubmit()" style="width: 90px;height: 34px;font-size: 14px;">提交</Button>
                            </FormItem>
                        </Form>
                    </Col>
                </Row>
            </Card>
            </Col>
        </Row>
    </div>
</template>
<script>
    import { getAuthList, getRoleInfo, updateRole} from '@/api/main'
    export default {
        data() {
            return {
                auth_list: [],
                auth_selecte:[],
                auth_selected:[],
                phones:0,
                role_list:[],
                formValidate: {
                    name: '',
                    description:'',
                    auth_names: [],
                    //phone_status:0
                },
            }
        },
        methods: {
            selectAuth(data){
                this.auth_selecte = data;
            },
            change(){
              this.phones = this.phones;
              console.log(this.phones)
            },
            handleSubmit() {
                let _this = this;
                //console.log(this.auth_selecte);return false;
                if (_this.formValidate.name == '') {
                    this.$Message.error("请填写角色名称");return false;
                }
                if (_this.formValidate.description == '') {
                    this.$Message.error("请填写角色描述");return false;
                }
                if (this.auth_selecte.length == 0) {
                    _this.$Message.error("请选择权限");return false;
                }

                this.role_list.name = _this.$route.params.name
                this.role_list.phones = this.phones
                console.log(this.role_list.phones)
                this.role_list.description = _this.formValidate.description
                this.role_list.auth_selecte = _this.auth_selecte
                //console.log(_this.auth_selecte);return false
                updateRole(this.role_list).then(res => {
                    if (res.code === 0) {
                        this.$Message.success('操作成功')
                        this.init()
                    } else {
                        this.$Message.error(res.text)
                    }
                })
            },
            init () {
                getAuthList().then(res => {
                    this.auth_list = res.data
                })
                let obj = {}
                obj.name = this.$route.params.name
                getRoleInfo(obj).then(res => {
                    if (res.code === 0) {

                        this.formValidate.name = res.data.name
                        this.phones = res.data.phone_status
                        this.formValidate.description = res.data.description
                        this.auth_selecte = res.data.auth_data
                        this.auth_selected = res.data.auth_data
                    }
                })
            },
        },
        mounted() {
            this.init(0)
        },
    }
</script>
<style type="text/css">
    .auth_select{
        width:1103px;
        height: auto;
        border:1px solid #DCDEE2;
        border-radius:5px;
        padding-left:10px
    }
    .auth_check{
        width:45%;
        height:35px;
        margin-left:10px;
        display:inline-block;
        padding-left:1%
    }
</style>
